<template>
  <div class="voice-btn" :class="{ muted }" style="position: relative; cursor: pointer" @click.stop.prevent="muteAudio">
    <img :src="muted ? icons.mic_off : icons.mic_on" style="width: 100%; height: 100%" alt="btn" />
    <div
      v-if="!muted"
      class="volume-level"
      style="
        position: absolute;
        bottom: 0;
        left: 0;
        width: 28px;
        height: 0%;
        overflow: hidden;
        transition: height 0.1s ease;
      "
    >
      <img :src="icons.mic_green" style="position: absolute; bottom: 0" alt="btn" />
    </div>
  </div>
</template>

<script>
import { handleVideoConferencing } from './index.js';
import mic_on from './img/mic-on.png';
import mic_off from './img/mic-off.png';
import mic_green from './img/mic-green.png';

const icons = {
  mic_on: mic_on,
  mic_off: mic_off,
  mic_green: mic_green,
};

export default {
  name: 'voice-btn',
  props: {
    account: String,
    mute: { type: Boolean, default: false },
    click: { type: Function, default: undefined },
  },
  data() {
    return {
      icons,
      muted: undefined,
    };
  },
  watch: {
    mute: {
      immediate: true,
      handler() {
        this.muted = this.mute;
      },
    },
  },
  methods: {
    muteAudio() {
      this.muted = !this.muted;
      if (typeof this.click === 'function') {
        this.click({ account: this.account, ...this.$attrs, muted: this.isMuted });
      } else {
        handleVideoConferencing(this.account, {
          type: 'audio',
          handle: this.muted ? 'close' : 'open',
        });
      }
    },
  },
};
</script>
